<!DOCTYPE html>
<html lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Material Style - Responsive Email Template</title>
    <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--[if !mso]>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <![endif]-->
    <style type="text/css">/* CLIENT-SPECIFIC STYLES */

      #outlook a {
        padding: 0;
      }

      .ReadMsgBody {
        width: 100%;
      }

      .ExternalClass {
        width: 100%;
      }

      .ExternalClass,
      .ExternalClass p,
      .ExternalClass span,
      .ExternalClass font,
      .ExternalClass td,
      .ExternalClass div,
      .ExternalClass * {
        line-height: 100%;
      }

      body,
      table,
      td,
      a {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }

      table,
      td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }

      img {
        -ms-interpolation-mode: bicubic;
      }

      /* RESET STYLES */

      body {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
      }

      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
      }

      table {
        border-collapse: collapse !important;
      }

      /* Remove margin on email wrapper in Android 4.4 KitKat */

      /* See more at: https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/ */

      div[style*="margin: 16px 0"] {
        margin: 0 !important;
        font-size: 100% !important;
      }

      /* Remove ios blue links */

      a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
      }

      /* Outline styles */

      @media only screen and (max-width: 599px) {
        .content-table {
          width: 100% !important;
        }
        img[class="img-max"] {
          width: 100% !important;
          height: auto !important;
        }
        table[class="mobile-button-wrap"] {
          margin: 0 auto;
          width: 100% !important;
        }
        a[class="mobile-button"] {
          width: 80% !important;
          padding: 8px !important;
          border: 0 !important;
        }
        .mobile-align-center {
          text-align: center !important;
          margin-right: auto;
          margin-left: auto;
        }
      }
    </style>
  </head>
  <body style="margin: 0 !important; padding: 0 !important;">
    <!-- hidden preheader text - Remember to change it! -->
    <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Roboto', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;mso-hide:all;"> Material Style - Responsive Email Template </div>
    <!-- Don't forget to include a header -->
    <!-- Header full centre -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td bgcolor="#03A9F4" align="center">
          <table style="min-width: 320px;" class="content-table" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
            <tr>
              <td style="padding: 16px 16px 16px 16px;" align="center" valign="top">
                <a href="http://outlinemail.co.uk">
                  <img style="display: block" src="assets/img/email/logo-white.png" width="380" height="28" border="0" alt="Outline Mail"> </a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!-- /Header full centre -->
    <!-- Include all your body email components here -->
    <!-- Hero image, title, text, cta centre -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td style="padding: 32px 0 32px 0;" bgcolor="#ffffff" align="center">
          <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td align="center">
                <table class="content-table" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
                  <tr>
                    <td style="padding: 0 16px 0 16px;" align="center" valign="top">
                      <!-- content -->
                      <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                          <td style="padding: 0 0 16px 0;" align="center">
                            <a href="#" target="_blank">
                              <img style="display: block; font-family: 'Roboto', Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; width: 600px; height: 368px;" class="img-max" src="assets/img/email/img1.jpg" alt="Material Style" width="600"
                                height="250" border="0"> </a>
                          </td>
                        </tr>
                        <tr>
                          <td align="center" style="padding: 0 0 8px 0; color: #03A9F4; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 28px; font-weight: 400; line-height: 32px;"> The clean &amp; simple framework </td>
                        </tr>
                        <tr>
                          <td align="center" style="padding: 0 0 16px 0; color: #424242; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 28px;"> Outline is simple CSS starter boilerplate for any new web project. It's a modular, mobile-first framework which includes todays best practices for responsive design and core components I use on every project. Outline is designed
                            to be a starting point. A solid foundation for your project, leaving the creativity up to you. </td>
                        </tr>
                        <tr>
                          <td>
                            <!-- Button -->
                            <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
                              <tr>
                                <td align="center">
                                  <table border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td align="center">
                                        <a style="background-color: #03A9F4; border-top: 10px solid #03A9F4; border-right: 22px solid #03A9F4; border-bottom: 8px solid #03A9F4; border-left: 22px solid #03A9F4; display: inline-block; color: #fff; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; text-decoration: none; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); text-transform: uppercase;"
                                          href="#" target="_blank">Get started</a>
                                      </td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                            <!-- /Button -->
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!-- /Hero image, title, text, cta centre -->
    <!-- Articles title -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td style="padding: 32px 0 0 0;" bgcolor="#ffffff" align="center">
          <table class="content-table" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
            <tr>
              <td style="padding: 0 16px 0 16px;" align="center" valign="top">
                <!-- Two column -->
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <!-- Title -->
                  <tr>
                    <td align="left">
                      <table class="content-table" border="0" cellpadding="0" cellspacing="0" width="70%" align="right">
                        <tr>
                          <td style="padding: 0 0 16px 0; color: #03A9F4; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 28px; font-weight: 400; line-height: 32px;"> Today's top picks </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <!-- /Title -->
                  <!-- Article 1 -->
                  <tr>
                    <td>
                      <!-- content left -->
                      <table class="content-table" border="0" cellpadding="0" cellspacing="0" width="28%" align="left">
                        <tr>
                          <td align="center" valign="top">
                            <a href="#" target="_blank">
                              <img style="display: block; padding: 0 0 8px 0; font-family: 'Roboto', Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; width: 150px; height: 84px;" class="img-max" src="assets/img/email/img2.jpg" alt="Material Style"
                                width="150" height="84" border="0"> </a>
                          </td>
                        </tr>
                      </table>
                      <!-- /content left -->
                      <!-- content right -->
                      <table class="content-table" border="0" cellpadding="0" cellspacing="0" width="70%" align="right">
                        <tr>
                          <td valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                              <tr>
                                <td style="padding: 0 0 8px 0; color: #333333; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 30px;" align="left"> A growing community for email professionals </td>
                              </tr>
                              <tr>
                                <td style="padding: 0 0 16px 0; color: #333333; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px;" align="left"> Share knowledge, ask code questions, and learn from a growing library of articles on all things email. </td>
                              </tr>
                              <tr>
                                <td style="padding: 0 0 32px 0;">
                                  <!-- Button -->
                                  <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                    <tr>
                                      <td align="left">
                                        <table class="mobile-button-wrap" border="0" cellspacing="0" cellpadding="0">
                                          <tr>
                                            <td align="center">
                                              <a style="background-color: #03A9F4; border-top: 10px solid #03A9F4; border-right: 22px solid #03A9F4; border-bottom: 8px solid #03A9F4; border-left: 22px solid #03A9F4; display: inline-block; color: #fff; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; text-decoration: none; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); text-transform: uppercase;"
                                                href="#" target="_blank">Get started</a>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                  <!-- /Button -->
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!-- /content right -->
                    </td>
                  </tr>
                  <!-- /Article 1 -->
                  <!-- Article 2 -->
                  <tr>
                    <td>
                      <!-- content left -->
                      <table class="content-table" border="0" cellpadding="0" cellspacing="0" width="28%" align="left">
                        <tr>
                          <td align="center" valign="top">
                            <a href="#" target="_blank">
                              <img style="display: block; padding: 0 0 8px 0; font-family: 'Roboto', Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; width: 150px; height: 84px;" class="img-max" src="assets/img/email/img3.jpg" alt="Material Style"
                                width="150" height="84" border="0"> </a>
                          </td>
                        </tr>
                      </table>
                      <!-- /content left -->
                      <!-- content right -->
                      <table class="content-table" border="0" cellpadding="0" cellspacing="0" width="70%" align="right">
                        <tr>
                          <td valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                              <tr>
                                <td style="padding: 0 0 8px 0; color: #333333; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 30px;" align="left"> A growing community for email professionals </td>
                              </tr>
                              <tr>
                                <td style="padding: 0 0 16px 0; color: #333333; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px;" align="left"> Share knowledge, ask code questions, and learn from a growing library of articles on all things email. </td>
                              </tr>
                              <tr>
                                <td style="padding: 0 0 32px 0;">
                                  <!-- Button -->
                                  <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                    <tr>
                                      <td align="left">
                                        <table class="mobile-button-wrap" border="0" cellspacing="0" cellpadding="0">
                                          <tr>
                                            <td align="center">
                                              <a style="background-color: #03A9F4; border-top: 10px solid #03A9F4; border-right: 22px solid #03A9F4; border-bottom: 8px solid #03A9F4; border-left: 22px solid #03A9F4; display: inline-block; color: #fff; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; text-decoration: none; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); text-transform: uppercase;"
                                                href="#" target="_blank">Get started</a>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                  <!-- /Button -->
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!-- /content right -->
                    </td>
                  </tr>
                  <!-- /Article 2 -->
                  <!-- Article 3 -->
                  <tr>
                    <td>
                      <!-- content left -->
                      <table class="content-table" border="0" cellpadding="0" cellspacing="0" width="28%" align="left">
                        <tr>
                          <td align="center" valign="top">
                            <a href="#" target="_blank">
                              <img style="display: block; padding: 0 0 8px 0; font-family: 'Roboto', Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; width: 150px; height: 84px;" class="img-max" src="assets/img/email/img4.jpg" alt="Material Style"
                                width="150" height="84" border="0"> </a>
                          </td>
                        </tr>
                      </table>
                      <!-- /content left -->
                      <!-- content right -->
                      <table class="content-table" border="0" cellpadding="0" cellspacing="0" width="70%" align="right">
                        <tr>
                          <td valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                              <tr>
                                <td style="padding: 0 0 8px 0; color: #333333; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 30px;" align="left"> A growing community for email professionals </td>
                              </tr>
                              <tr>
                                <td style="padding: 0 0 16px 0; color: #333333; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px;" align="left"> Share knowledge, ask code questions, and learn from a growing library of articles on all things email. </td>
                              </tr>
                              <tr>
                                <td style="padding: 0 0 32px 0;">
                                  <!-- Button -->
                                  <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                    <tr>
                                      <td align="left">
                                        <table class="mobile-button-wrap" border="0" cellspacing="0" cellpadding="0">
                                          <tr>
                                            <td align="center">
                                              <a style="background-color: #03A9F4; border-top: 10px solid #03A9F4; border-right: 22px solid #03A9F4; border-bottom: 8px solid #03A9F4; border-left: 22px solid #03A9F4; display: inline-block; color: #fff; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; text-decoration: none; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); text-transform: uppercase;"
                                                href="#" target="_blank">Get started</a>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                  <!-- /Button -->
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!-- /content right -->
                    </td>
                  </tr>
                  <!-- /Article 3 -->
                </table>
                <!-- /Two column -->
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!-- /Articles title -->
    <!-- Don't forget to include a footer -->
    <!-- footer full centre -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td style="padding: 32px 0 0 0;" align="center">
          <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td bgcolor="#546E7A" align="center">
                <table class="content-table" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
                  <tr>
                    <td style="padding: 16px 16px 16px 16px;" align="center" valign="top">
                      <!-- content -->
                      <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                          <td style="color: #90A4AE; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 21px;" align="center"> Material Style is a project by
                            <a style="color: #CFD8DC; text-decoration: none;" href="#">AGM Studio</a>
                          </td>
                        </tr>
                        <tr>
                          <td style="color: #90A4AE; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 21px;" align="center">
                            <a style="color: #CFD8DC; text-decoration: none;" href="#">View this email in your browser</a> |
                            <a style="color: #CFD8DC; text-decoration: none;" href="#">Unsubscribe</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!-- /footer full centre -->
  </body>
</html>